<template>
  <div class='search-head'>
    <header class="head">
      <span v-for="(item, index) in headerData" :key="index" :class="item.class" @click="doClick(item)">{{item.label}}</span>
    </header>
    <ul class="content">
      <li v-for="(item, index) in listData" :key="index">
        <span>{{item.label}}：</span>
        <div :class="{'over-hide':item.isHidden}"><span v-for="(child, childIndex) in item.children" :key="childIndex">{{child.label}}</span></div>
        <span class="show-btn color-999 hover" v-show="item.hasBtn" @click="item.isHidden=!item.isHidden">{{item | formaltShow}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      headerData:[
        {label:"搜索分类",class:"ft14"},
        {label:"清空",class:"fr mr10 ft14 clear-btn hover",click:this.doClear},
        {label:"搜索",class:"fr mr15 ft14 color-white bc-blue hover",click:this.doSearch},
      ],
      listData:[
        {label:"品名",hasBtn:false,isHidden:true,children:[
          {label:"风机"},
          {label:"风机"},
        ]},
        {label:"规格",hasBtn:false,isHidden:true,children:[
          {label:"风机"},
          {label:"风机"},
          {label:"风机"},
          {label:"风机"}
        ]},
        {label:"材质",hasBtn:false,isHidden:true,children:[
          {label:"风机"},
          {label:"风机"},
          {label:"风机"},
          {label:"风机"}
        ]},
        {label:"厂家",hasBtn:false,isHidden:true,children:[
          {label:"风机"},
          {label:"风机"},
          {label:"风机"},
          {label:"风机"}
        ]},
        {label:"用途",hasBtn:false,isHidden:true,children:[
          {label:"风机"},
          {label:"风机"},
          {label:"风机"},
          {label:"风机"}
        ]},
      ]
    };
  },
  filters:{
    formaltShow(item){
      return item.isHidden?"显示":"隐藏"
    }
  },
  methods: {
    doClick(item){
      if(item.click)item.click()
    },

    doSearch(){
      console.log("搜索")
    },

    doClear(){
      console.log("清空搜索");
    },

    /**
     * @name 初始化
     */
    init(){
      // 判断是否有显示隐藏
      var goals = document.querySelectorAll(".content div")
      goals.forEach((ele,index)=>{
        if(ele.clientHeight>30){
          this.$set(this.listData[index],'hasBtn',true)
        }
      })
    }
  },
  created() {},

  mounted(){
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.search-head {
  .head{
    padding: 10px 20px;
    line-height: 30px;
    border: 1px solid #eee;
    box-sizing: border-box;
  }
  .content{
    padding: 10px 30px;
    font-size: 14px;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-top: none;
    line-height: 30px;

    li{
      display: flex;

      div{
        flex: 1;
        margin: 0 10px;

        span{
          margin-right: 10px;
        }
      }
      .over-hide{
        height: 30px;
        overflow: hidden;
      }
      .show-btn{
        
      }
    }
  }
  .fr{
    width: 80px;
    text-align: center;
  }
  .clear-btn{
    width: 30px;
  }
}
</style>